<template >
  <div v-if="userType === 1">
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#808080"
        text-color="#fff"
        active-text-color="#77ff77">
      <el-menu-item index="1"><router-link to="/EstablishProj" >我要立项！</router-link></el-menu-item>
      <el-submenu index="2">
        <template #title>查看项目</template>
        <el-menu-item index="2-1"><router-link to="/MyProj" >我的科研项目</router-link></el-menu-item>
        <el-menu-item index="2-2"><router-link to="/PermittedProj" >浏览正在进行中项目</router-link></el-menu-item>
        <el-submenu index="2-3">
          <template #title>申请加入项目</template>
          <el-menu-item index="2-3-1"><router-link to="/MyApply" >查看我的申请</router-link></el-menu-item>
        </el-submenu>
        <el-menu-item index="2-4"><router-link to="/Leader">发给我的申请</router-link></el-menu-item>
      </el-submenu>
    </el-menu>
    <br/>
    <el-input v-model="listQuery.name" placeholder="项目名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
    <el-input v-model="listQuery.username" placeholder="申请人姓名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
    <el-select v-model="listQuery.state" placeholder="状态" clearable class="filter-item" style="width: 130px">
      <el-option v-for="item in stateOptionQuery" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
    </el-select>
    <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
      Search
    </el-button>
    <el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
      Export
    </el-button>
    <el-table
            :data="tableData"
            border
            style="width: 100%"
    >
      <el-table-column
              prop="id"
              label="项目id"
              width="150"
      />
      <el-table-column
              prop="name"
              label="项目名称"
              width="120"
      />
      <el-table-column
              prop="username"
              label="申请人姓名"
              width="120"
      />
      <el-table-column
              prop="userId"
              label="申请人id"
              width="120"
      />
      <el-table-column
              prop="content"
              label="申请理由"
              width="275"
      />
      <el-table-column
              prop="state"
              label="state"
              width="120"
      />
      <el-table-column label="状态" align="center" width="120" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button v-if="scope.row.state=='1'" size="mini" type="success">
            已通过
          </el-button>
          <el-button v-if="scope.row.state=='0'" size="mini">
            未通过
          </el-button>
          <el-button v-if="scope.row.state=='2'" size="mini" type="success">
            未处理
          </el-button></template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
            查看
          </el-button>
          <el-button v-if="scope.row.state!='1'" size="mini" type="success" @click="handleModifyStatus(scope.row,'1')">
            通过
          </el-button>
          <el-button v-if="scope.row.state!='0'" size="mini" @click="handleModifyStatus(scope.row,'0')">
            未通过
          </el-button></template>
      </el-table-column>
    </el-table>
    <el-dialog :title="textMap[dialogStatus] +' '+ temp.username +' 的申请'" v-model="dialogVisible">
      <el-form ref="dataForm" :model="temp" label-position="left" label-width="90px" style="width: 400px; margin-left:50px;">
        <el-form-item label="Id" prop="id">
          <el-input v-model="temp.id" readonly="true"/>
        </el-form-item>
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="temp.name" readonly="true"/>
        </el-form-item>
        <el-form-item label="申请人姓名" prop="username">
          <el-input v-model="temp.username" readonly="true"/>
        </el-form-item>
        <el-form-item label="申请人id" prop="user_id">
          <el-input v-model="temp.userId" readonly="true"/>
        </el-form-item>
        <el-form-item label="申请理由" prop="content">
          <el-input type="textarea" v-model="temp.content" readonly="true"/>
        </el-form-item>
        <el-form-item label="State" prop="state">
          <el-select v-model="temp.state" class="filter-item" placeholder="Please select">
            <el-option v-for="item in stateOptionForm" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="updateData()">
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import http from "../../utils/req";
import userService from "../../utils/userService";
const stateOptionQuery = [
    { key: '0', display_name: '未通过' },
    { key: '1', display_name: '已通过' },
    { key: '2', display_name: '未处理' }
  ]
  const stateOptionForm = [
    { key: '0', display_name: '未通过' },
    { key: '1', display_name: '已通过' },
  ]
export default {
  name: "leader",
  filters: {
    statusFilter(state) {
      const statusMap = {
        1: '已通过',
        0: '未通过',
        2:'未处理'
      }
      return statusMap[state]
    }
  },
  data() {
    return {
      tableData: [{
        id: '',
        name: '',
        username: '',
        userId:'',
        content: '',
        state:''
      }],
      listQuery: {
        id: '',
        name: '',
        username: '',
        userId:'',
        content: '',
        state:''
      },
      temp:{
        id: '',
        name: '',
        username: '',
        userId:'',
        content: '',
        state:''
      },
      statusOptions: ['1', '0','2'],
      stateOptionQuery,
      stateOptionForm,
      dialogVisible : false,
      dialogStatus: '',
      textMap: {
        update: '查看'
      },
      downloadLoading: false
    }
  },
  computed:{
    userType(){
      if (!userService.currentUser){
        return null ;
      }else{
        return userService.currentUser.type;
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(){
      http.get('/ProjectJoinApply/findAllProjectJoinApplyVO', {params: this.listQuery}).then((value => {
          this.tableData = value.data?value.data:[];
      }))
    },
    handleFilter() {
      this.getData()
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogVisible = true
    },
    //handleModifyStatus(row, state){},
    handleModifyStatus(row, state) {
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.state = state
      this.temp = Object.assign({}, row) // copy obj
      http.post('/ProjectMember/insertProjectMember', this.temp).then(() => {
      })
      http.post('/ProjectJoinApply/updateProjectJoinApplyState',this.temp).then(() => {
        this.getData()

      })
    },
    updateData() {
      http.post('/ProjectMember/insertProjectMember', this.temp).then(() => {
        this.dialogVisible = false
      })
      http.post('/ProjectJoinApply/updateProjectJoinApplyState', this.temp).then(() => {
        this.getData()
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('../../utils/Export2Excel').then(excel => {
        const tHeader = ['项目id', '项目名称', '申请人姓名', '申请人id', '申请理由','状态']
        const filterVal = ['id', 'name', 'username', 'userId', 'content','state']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '科研人员申请表'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.tableData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>

<style scoped>

</style>